<template>
  <div ref="node" :style="nodeStyle" class="center-node">
    <a-button @click="$emit('addNew')"
              class="center-node-add-button"
              type="primary" shape="circle" size="small" icon="plus"/>
    <div class="center-node-header">
      {{ title }}
    </div>
    <div class="center-node-footer">
      <span v-if="formDefinition.hasFlow" class="iconfont">&#xea40;</span>
      <span v-else class="iconfont">&#xe88b;</span>
    </div>
    <div class="center-node-setting">
      <a-button shape="round" size="small" @click="$emit('editForm')" ghost type="primary"> 修改表单</a-button>
      <a-button type="link" icon="file-text"/>
    </div>
  </div>
</template>
<script>
import {createProps} from '@/utils';
import {createFormDefinition} from '@comp/hhd/design/FormDesigner/types';

export default {
  name: 'CenterNode',
  props: {
    formDefinition: createProps(Object, createFormDefinition),
    title: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      width: 0,
      height: 0
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.width = this.$refs.node.offsetWidth || 150;
      this.height = this.$refs.node.offsetHeight || 70;
    });
  },
  computed: {
    nodeStyle() {
      return {
        transform: `translate(${-this.width / 2}px,${-this.height / 2}px)`
      };
    },
  }
};
</script>
<style>
.center-node {
  background: #1f85ec;
  color: white;
  border-radius: 100px;
  min-width: 150px;
  box-shadow: 0 0 10px rgba(31, 133, 236, 0.57);
  z-index: 2;
  position: absolute;
  padding: 0 10px;
}

.center-node-setting {
  display: none;
  height: 70px;
}

.center-node:hover .center-node-header,
.center-node:hover .center-node-footer {
  display: none;
}

.center-node:hover {
  background: white;
}

.center-node:hover .center-node-setting {
  display: flex;
  align-items: center;
  justify-content: center;
}

.center-node-header {
  border-bottom: 1px dashed #cccccc;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}

.center-node-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
}


.center-node-add-button:hover,
.center-node-add-button:focus {
  background-color: #f6a638;
  border-color: #f6a638;
}

.center-node-add-button,
.center-node-add-button .ant-btn-primary {
  background-color: #f6a638;
  border-color: #f6a638;
}

.center-node-add-button {
  position: absolute;
  right: 0;
  top: 0;

}
</style>